Web Development Backend সার্ভিসের সাথে Angular (Node.js, Spring Boot) গাইড ও নোট

Angular একটি ক্লায়েন্ট-সাইড ফ্রেমওয়ার্ক এবং এটি সাধারণত ব্রাউজারে রান করে, যেখানে বিভিন্ন ধরনের UI উপাদান এবং রাউটিং ম্যানেজ করা হয়। তবে, Angular অ্যাপ্লিকেশনকে একটি পূর্ণাঙ্গ অ্যাপ্লিকেশন বানানোর জন্য, আপনাকে সাধারণত একটি ব্যাকএন্ড সার্ভিসের সঙ্গে যুক্ত করতে হয়, যেমন Node.js বা Spring Boot। এই ব্যাকএন্ড সার্ভিসটি সাধারণত RESTful API বা GraphQL API সরবরাহ করে, যার মাধ্যমে Angular ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা এক্সচেঞ্জ করা হয়।

এখানে আমরা আলোচনা করব কিভাবে Angular অ্যাপ্লিকেশনকে Node.js এবং Spring Boot ব্যাকএন্ড সার্ভিসের সাথে ইন্টিগ্রেট করা যায়।

1. Node.js Backend Setup for Angular

Node.js একটি জাভাস্ক্রিপ্ট রানটাইম যা সার্ভার সাইড অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। Angular অ্যাপ্লিকেশনকে Node.js ব্যাকএন্ড সার্ভিসের সাথে ইন্টিগ্রেট করতে সাধারণত Express.js ব্যবহৃত হয়। Express.js একটি জনপ্রিয় Node.js ফ্রেমওয়ার্ক যা দ্রুত RESTful API তৈরিতে সহায়তা করে।

Node.js Backend with Express Setup

1. প্রথমে Node.js এবং Express ইনস্টল করুন:

   npm init -y  # package.json তৈরি করতে
   npm install express cors body-parser
   

2. Express.js সার্ভার তৈরি করুন: একটি server.js ফাইল তৈরি করুন এবং নিচের কোডটি যোগ করুন:

   const express = require('express');
   const cors = require('cors');
   const bodyParser = require('body-parser');
   
   const app = express();
   const port = 3000;
   
   app.use(cors());  // Cross-Origin Resource Sharing
   app.use(bodyParser.json());
   
   // Example endpoint
   app.get('/api/data', (req, res) => {
     res.json({ message: 'Hello from Node.js API' });
   });
   
   app.listen(port, () => {
     console.log(`Server running at http://localhost:${port}`);
   });
   

3. Node.js সার্ভার রান করুন:

   node server.js
   

4. Angular অ্যাপ্লিকেশন থেকে Node.js API কল করা: Angular অ্যাপ্লিকেশনে HTTP রিকোয়েস্ট পাঠানোর জন্য HttpClient মডিউল ব্যবহার করুন।

   • প্রথমে HttpClientModule Angular অ্যাপে ইনপোর্ট করুন:

   import { HttpClientModule } from '@angular/common/http';
   

   • এরপর অ্যাপ মডিউলে এটি যুক্ত করুন:

   @NgModule({
     imports: [ HttpClientModule ],
   })
   export class AppModule { }
   

   • একটি সার্ভিস তৈরি করুন এবং Node.js API থেকে ডেটা ফেচ করুন:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   export class DataService {
     private apiUrl = 'http://localhost:3000/api/data';
   
     constructor(private http: HttpClient) {}
   
     getData(): Observable<any> {
       return this.http.get(this.apiUrl);
     }
   }
   

   • কম্পোনেন্টে এই সার্ভিসটি ব্যবহার করুন:

   import { Component, OnInit } from '@angular/core';
   import { DataService } from './data.service';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     data: any;
   
     constructor(private dataService: DataService) {}
   
     ngOnInit(): void {
       this.dataService.getData().subscribe((response) => {
         this.data = response;
       });
     }
   }
   

2. Spring Boot Backend Setup for Angular

Spring Boot একটি Java-based ফ্রেমওয়ার্ক যা ব্যাকএন্ড ডেভেলপমেন্টের জন্য ব্যবহৃত হয় এবং এটি RESTful API সরবরাহ করতে সক্ষম। Spring Boot অ্যাপ্লিকেশনকে Angular অ্যাপ্লিকেশনের সাথে ইন্টিগ্রেট করতে আপনি HTTP রিকোয়েস্টের মাধ্যমে ডেটা এক্সচেঞ্জ করতে পারেন।

Spring Boot Backend Setup

1. Spring Boot স্টার্টার ডিপেনডেন্সি ইনস্টল করুন: Spring Initializr ব্যবহার করে একটি Spring Boot প্রজেক্ট তৈরি করুন: Spring Initializr

   ডিপেনডেন্সি হিসেবে Spring Web, Spring Boot DevTools, এবং Spring Data JPA নির্বাচন করুন।

2. Spring Boot অ্যাপ্লিকেশন তৈরি করুন:

   একটি কন্ট্রোলার তৈরি করুন, যেমন:

   @RestController
   @RequestMapping("/api")
   public class DataController {
   
     @GetMapping("/data")
     public ResponseEntity<Map<String, String>> getData() {
       Map<String, String> response = new HashMap<>();
       response.put("message", "Hello from Spring Boot API");
       return ResponseEntity.ok(response);
     }
   }
   

3. Spring Boot অ্যাপ্লিকেশন রান করুন: mvn spring-boot:run অথবা ./mvnw spring-boot:run কমান্ড দিয়ে Spring Boot অ্যাপ্লিকেশন রান করুন।

4. Angular অ্যাপ্লিকেশন থেকে Spring Boot API কল করা: Angular-এ HttpClient ব্যবহার করে Spring Boot API থেকে ডেটা ফেচ করা:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   export class DataService {
     private apiUrl = 'http://localhost:8080/api/data';
   
     constructor(private http: HttpClient) {}
   
     getData(): Observable<any> {
       return this.http.get(this.apiUrl);
     }
   }
   

   • কম্পোনেন্টে এই সার্ভিস ব্যবহার করুন:

   import { Component, OnInit } from '@angular/core';
   import { DataService } from './data.service';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     data: any;
   
     constructor(private dataService: DataService) {}
   
     ngOnInit(): void {
       this.dataService.getData().subscribe((response) => {
         this.data = response;
       });
     }
   }
   

সার্ভিসের সাথে যোগাযোগের জন্য CORS কনফিগারেশন

যেহেতু Angular (ক্লায়েন্ট) এবং Node.js বা Spring Boot (ব্যাকএন্ড) আলাদা ডোমেইনে হতে পারে, তাই CORS (Cross-Origin Resource Sharing) কনফিগারেশন প্রয়োজন হতে পারে।

• Node.js (Express) CORS কনফিগারেশন:

  const cors = require('cors');
  app.use(cors());
  

• Spring Boot CORS কনফিগারেশন:

  @Configuration
  public class WebConfig implements WebMvcConfigurer {
  
    @Override
    public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/api/**").allowedOrigins("http://localhost:4200");
    }
  }
  

সারাংশ

Angular এবং ব্যাকএন্ড সার্ভিস (Node.js বা Spring Boot) ইন্টিগ্রেট করার জন্য, আপনাকে HTTP রিকোয়েস্টের মাধ্যমে ডেটা এক্সচেঞ্জ করতে হবে। Node.js এর জন্য Express.js ব্যবহার করা হয়, এবং Spring Boot এর জন্য RESTful API তৈরি করা হয়। Angular থেকে API কল করার জন্য HttpClient ব্যবহার করা হয় এবং CORS কনফিগারেশন নিশ্চিত করা গুরুত্বপূর্ণ।